import BpmnModeler from "@/module/main/other/BpmnTestView/BpmnModeler";
import {Component, ComponentProps, Hook, Mut, VueComponent} from "vue3-oop";
import {NTable, NButton, NGrid, NGi, NTag, NSpace, NForm, NInput, NCard, NFormItem} from "naive-ui";
import { nicon } from "@/utils/IconUtil";
import styles from "./index.module.scss";

interface IProps {
  bpmnModeler: BpmnModeler,
  elementId: string,
  elementName: string,
  elementType: string
}
@Component()
export default class Index extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    bpmnModeler: {default: {} as any},
    elementId: {default: ''},
    elementName: {default: ''},
    elementType: {default: ''}
  }

  public static tabKey = "MESSAGE"
  public static tabName = "消息与信号"

  @Mut() state = {
    messageList: [] as any[],
    signalList: [] as any[]
  }

  /** 点击添加消息 */
  private handleAddMessage=()=>{
    const formData = ref({id:"",name:""}).value;
    const handleConfirm=()=>{
      if(this.state.messageList.find((msg)=>msg.id===formData.id)){
        window.$message.error("消息ID重复，无法添加");
        return;
      }
      const message = this.props.bpmnModeler.getModdle().create('bpmn:Message',{id: formData.id,name: formData.name});
      this.props.bpmnModeler.getDefinitions().rootElements.push(message)
      this.loadDataFromElement();
    }
    const dialog = window.$popUp({
      style: {width:"600px",height:"250px"},
      content:()=>(
        <NCard title={`添加新消息`}>
          {{
            default:()=>(
              <NForm labelPlacement={"left"} labelWidth={100}>
                <NFormItem label='消息ID' required={true}><NInput value={formData.id} onUpdateValue={(value)=>{formData.id=value}} /></NFormItem>
                <NFormItem label='消息名称' required={true}><NInput value={formData.name} onUpdateValue={(value)=>{formData.name=value}} /></NFormItem>
              </NForm>
            ),
            footer:()=>(<NSpace>
              <NButton size={"small"} onClick={()=>{handleConfirm();dialog.destroy();}}>确定</NButton>
              <NButton size={"small"} onClick={()=>{dialog.destroy()}}>取消</NButton>
            </NSpace>)
          }}
        </NCard>
      )
    });
  }

  private handleRemoveMessage=(id:any)=>{
    const rootElements = this.props.bpmnModeler.getDefinitions().rootElements as any[];
    rootElements.forEach((item, index, arr)=>{
      if(item.id === id) {
        arr.splice(index, 1);
      }
    });
    this.loadDataFromElement();
  }

  /** 点击添加信号 */
  private handleAddSignal=()=>{
    const formData = ref({id:"",name:""}).value;
    const handleConfirm=()=>{
      if(this.state.signalList.find((msg)=>msg.id===formData.id)){
        window.$message.error("信号ID重复，无法添加");
        return;
      }
      const signal = this.props.bpmnModeler.getModdle().create('bpmn:Signal',{id: formData.id,name: formData.name});
      this.props.bpmnModeler.getDefinitions().rootElements.push(signal)
      this.loadDataFromElement();
    }
    const dialog = window.$popUp({
      style: {width:"600px",height:"250px"},
      content:()=>(
        <NCard title={`添加新信号`}>
          {{
            default:()=>(
              <NForm labelPlacement={"left"} labelWidth={100}>
                <NFormItem label='信号ID' required={true}><NInput value={formData.id} onUpdateValue={(value)=>{formData.id=value}} /></NFormItem>
                <NFormItem label='信号名称' required={true}><NInput value={formData.name} onUpdateValue={(value)=>{formData.name=value}} /></NFormItem>
              </NForm>
            ),
            footer:()=>(<NSpace>
              <NButton size={"small"} onClick={()=>{handleConfirm();dialog.destroy();}}>确定</NButton>
              <NButton size={"small"} onClick={()=>{dialog.destroy()}}>取消</NButton>
            </NSpace>)
          }}
        </NCard>
      )
    });
  }

  private handleRemoveSignal=(id:any)=>{
    const rootElements = this.props.bpmnModeler.getDefinitions().rootElements as any[];
    rootElements.forEach((item, index, arr)=>{
      if(item.id === id) {
        arr.splice(index, 1);
      }
    });
    this.loadDataFromElement();
  }

  private loadDataFromElement=()=>{
    const rootElements = this.props.bpmnModeler.getDefinitions().rootElements;
    this.state.messageList = [];
    this.state.signalList = [];
    rootElements.forEach((el:any) => {
      if (el.$type === 'bpmn:Message') {
        this.state.messageList.push({ ...el });
      }
      if (el.$type === 'bpmn:Signal') {
        this.state.signalList.push({ ...el });
      }
    });
  }

  render(){
    this.loadDataFromElement();

    return(
      <NGrid cols={2} xGap={10}>
        <NGi>
          <NSpace style={{marginBottom:"5px",justifyContent:"space-between"}}>
            <NTag bordered={false} style={{fontSize:'16px'}} color={{color:'whitesmoke'}}>
              {{ avatar: nicon("FormatListBulletedSharp"), default: ()=>"消息列表" }}
            </NTag>
            <NButton size="small" onClick={this.handleAddMessage}>添加</NButton>
          </NSpace>
          <NTable striped size="small">
            <thead>
            <tr>
              <th>序号</th>
              <th>消息ID</th>
              <th>消息名称</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {this.state.messageList.map((msg:any,index:number)=>(
              <tr>
                <td>{index+1}</td>
                <td>{msg.id}</td>
                <td>{msg.name}</td>
                <td><NButton size="small" onClick={()=>{this.handleRemoveMessage(msg.id)}}>删除</NButton></td>
              </tr>
            ))}
            </tbody>
          </NTable>
        </NGi>
        <NGi>
          <NSpace style={{marginBottom:"5px",justifyContent:"space-between"}}>
            <NTag bordered={false} style={{fontSize:'16px'}} color={{color:'whitesmoke'}}>
              {{ avatar: nicon("FormatListBulletedSharp"), default: ()=>"信号列表" }}
            </NTag>
            <NButton size="small" onClick={this.handleAddSignal}>添加</NButton>
          </NSpace>
          <NTable striped size="small">
            <thead>
            <tr>
              <th>序号</th>
              <th>信号ID</th>
              <th>信号名称</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {this.state.signalList.map((signal:any,index:number)=>(
              <tr>
                <td>{index+1}</td>
                <td>{signal.id}</td>
                <td>{signal.name}</td>
                <td><NButton size="small" onClick={()=>{this.handleRemoveSignal(signal.id)}}>删除</NButton></td>
              </tr>
            ))}
            </tbody>
          </NTable>
        </NGi>
      </NGrid>
    )
  }
}